<template>
  <div style="background: #fff; padding-bottom: 20px; margin-left: 10px">
    <el-table
      :data="tableData"
      style="width: 100%"
      height="350"
      v-loading="loading"
      max-height="350"
      border
    >
      <el-table-column label="序号" type="index" align="center" width="50">
      </el-table-column>
      <el-table-column prop="username" label="姓名" align="center" width="100">
      </el-table-column>
      <el-table-column
        prop="idCard"
        label="身份证号"
        align="center"
        width="130"
      >
      </el-table-column>
      <el-table-column
        prop="telephone"
        label="联系电话"
        align="center"
        width="100"
      >
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="提交时间"
        align="center"
        width="120"
      >
      </el-table-column>
      <el-table-column
        prop="flowStatusEnumStr"
        label="审核状态"
        align="center"
        width="80"
      >
        <template slot-scope="scope">
          <p  class="status" v-if="scope.row.flowStatusEnumStr == '审核中'">
            <span class="auditing"></span>待审核
          </p>
          <p v-if="scope.row.flowStatusEnumStr == '审核通过(完成)'" class="status">
            <span class="audit-pass"></span>已通过
          </p>
          <p v-if="scope.row.flowStatusEnumStr == '审核驳回'" class="status">
            <span class="audit-nopass"></span>审核驳回
          </p>
          <p v-if="scope.row.flowStatusEnumStr == '驳回(完成)'" class="status">
            <span class="audit-nopass"></span>不满足条件
          </p>
        </template>
      </el-table-column>
      <el-table-column prop="amount" label="额度" align="center" width="80">
      </el-table-column>
      <el-table-column prop="contract" label="合同" align="center" width="120">
        <template slot-scope="scope">
          <p
            v-if="scope.row.contract"
            @click="lookContrac(scope.row.contract)"
            class="look-contrac"
          >
            <a href="javascript:;">查看合同</a>
          </p>
          <p v-else>暂无合同</p>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center" width="120">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="edit(scope.row.id)"
            type="text"
            size="small"
            v-if="scope.row.approveAction == 'ASSIGN_CREATER' || scope.row.approveAction == '' || scope.row.approveAction === null"
          >
            编辑
          </el-button>
          <el-button
            @click.native.prevent="uploadContract(scope.row.id)"
            type="text"
            size="small"
            v-if="scope.row.approveAction == 'UP_CONTACT' || scope.row.approveAction == 'EDIT_CONTACT'"
          >
            上传合同
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <el-dialog title="上传合同" :visible.sync="openVisible" width="400px">
      <el-upload
        ref="upload"
        :limit="1"
        :headers="headers"
        :action="url"
        :disabled="isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>

        <!-- <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“xls”或“xlsx”格式文件！</div> -->
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm" :loading="uploading"
          >确 定</el-button
        >
        <el-button @click="openVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Cookie from 'js-cookie'
export default {
  data() {
    return {
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      openVisible: false,
      uploading: false,
      loading: false,

      // 是否更新已经存在的用户数据
      updateSupport: 0,
      // 是否禁用上传
      isUploading: false,
      headers: {
        TOKEN: Cookie.get("token"),
      },
      // 上传的地址
      url:
        this.baseUrl + "/sys/file/upload?TOKEN=" + Cookie.get("token"),
      upData: {
        id: "",
      },
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    // 获取编辑详情
    getList() {
      this.loading = true;
      this.$http("get", "/sys/iaFarmerLoans/getPageByMySelf.do", {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      })
        .then((res) => {
          if (res.code == "0000") {
            var data = res.result;
            this.tableData = data.rows;
            this.total = data.total;
          }
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      console.log(file.raw.name);
      this.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(res, file, fileList) {
      this.uploading = true;
      if (res.code == "0000") {
        this.$http("PUT", "/sys/iaFarmerLoans/upcontract.do", {
          contract: res.result[0],
          id: this.upData.id,
        }).then((rex) => {
          if (rex.code == "0000") {
            this.$message({
              type: "success",
              message: "上传成功",
            });
            this.uploading = false;
            this.getList();
          }
        });
      } else {
        this.$message.error("上传失败");
      }
      this.openVisible = false;
      this.isUploading = false;
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
    //编辑
    edit(id) {
      this.$router.push({
        path: "/helpFamiFinance/applyRecord",
        query: { isEditPage: true, id: id },
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.getList();
    },
    // 上传合同
    uploadContract(id) {
      this.openVisible = true;
      this.upData.id = id;
    },
    // 查看合同
    lookContrac(id) {
      console.log(id);
      window.location.href = this.baseUrl +"/sys/file/new/down?TOKEN="+Cookie.get("token")+"&id="+id;
    },

  },
};
</script>
<style scoped>
.auditing {
  width: 6px;
  height: 6px;
  background: #1890ff;
  display: inline-block;
  border-radius: 6px;
}
.audit-pass {
  width: 6px;
  height: 6px;
  background: #52c41a;
  display: inline-block;
  border-radius: 6px;
}
.audit-nopass {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #f7515a;
  border-radius: 6px;
}
.status {
  font-weight: 400;
  font-size: 14px;
  vertical-align: middle;
}
.status span {
  margin-right: 5px;
  vertical-align: middle;
}
.pagination {
  margin-top: 30px;
}
.look-contrac a {
  color: #1890ff;
  display: block;
}
.look-contrac a:hover {
  text-decoration: underline;
}
</style>
